/*------------------------------------
team
------------------------------------*/

.team-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark-mode-bg;
    color: $dark-mode-fg;
  }
}

.team-info {
  .top-section {
    display: flex;
    flex-direction: row;
    .profile-img {
      width: 200px;
      height: 200px;
      background-size: cover;
      margin-right: 24px;
      margin-bottom: 24px;
      background-color: #efefef;
    }
    .team-title {
      p.team-position {
        font-size: 14px;
        margin-bottom: 0.5rem;
      }
    }
    .team-social-links {
      a {
        display: inline-block;
      }
    }

    @media (max-width: 568px) {
      flex-direction: column;
      margin-bottom: 16px;
      .profile-img {
        margin: 0 auto 24px;
      }
    }
  }
  .modal-header {
    border-bottom: none;
    padding-bottom: 0;
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark-mode-bg;
    color: $dark-mode-fg;
  }
}

.social-links {
  a {
    display: inline-block;
    margin-right: 15px;
    color: $gray-dark;
    &:hover {
      color: $primary-color;
    }
  }
}
